<template>
  <div class="supervision-center">
    <div class="MidTitle">
      <span>柯桥e码通驾驶舱-资金监管</span>
    </div>
    <div class="MidTop">
      <div class="MidtopCon">
        <div v-for="(item, index) in midTopList" :key="index" class="MidTopBtn">
          <span>{{ item.num }}</span>
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="MidMap">
      <div
        v-for="it in mapTopList"
        :key="it.id"
        class="mapAll"
        :style="`left:10%;top:${it.top}`"
      >
        <div class="mapBox" :style="`background:${it.color}`" />
        <span>{{ it.title }}</span>
      </div>
      <div v-for="(items,i) in mapBotList" :key="i" class="mapBot" :style="`left:${items.left};top:${items.top}`">
        <span :style="`color:${items.color}`">{{ items.title }}</span>
        <p>{{ items.name }}</p>
      </div>
      <div style="height:90%">
        <map-echarts />
      </div>

    </div>
  </div>
</template>

<script>
import MapEcharts from './mapecharts';
// import VEcharts from '@/components/vecharts';

export default {
  components: {
    // VEcharts,
    MapEcharts
  },
  data() {
    return {
      midTopList: [
        {
          num: 29,
          title: '事前'
        },
        {
          num: 87,
          title: '事中'
        },
        {
          num: 56,
          title: '事后'
        }
      ],
      mapTopList: [
        {
          color: '#9F2115',
          top: '46%',
          title: '高风险',
          id: '001'
        },
        {
          color: '#B8822D',
          top: '50%',
          title: '较高风险',
          id: '002'
        },
        {
          color: '#C1C919',
          top: '54%',
          title: '中风险',
          id: '003'
        },
        {
          color: '#357ECA',
          top: '58%',
          title: '较低风险'
        },
        {
          color: '#37CA61',
          top: '62%',
          title: '低风险',
          id: '004'
        }
      ],
      mapBotList: [
        {
          left: '2%',
          top: '65%',
          title: '正常',
          name: '银行存款',
          color: '#E9D500'
        },
        {
          left: '17%',
          top: '65%',
          title: '正常',
          name: '岗位相容性',
          color: '#E9D500'
        },
        {
          left: '2%',
          top: '91%',
          title: '正常',
          name: '票据台账',
          color: '#E9D500'
        },
        {
          left: '17%',
          top: '91%',
          title: '异常',
          name: '现金盘点',
          color: '#B83737'
        },
        {
          left: '29%',
          top: '91%',
          title: '正常',
          name: '财务账',
          color: '#E9D500'
        },
        {
          left: '44%',
          top: '91%',
          title: '异常',
          name: '票据',
          color: '#B83737'
        },
        {
          left: '59%',
          top: '91%',
          title: '正常',
          name: '上传报告',
          color: '#E9D500'
        },
        {
          left: '72%',
          top: '91%',
          title: '正常',
          name: '收款人',
          color: '#E9D500'
        },
        {
          left: '85%',
          top: '91%',
          title: '正常',
          name: '发票验证',
          color: '#E9D500'
        }

      ]
    };
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.supervision-center {
  padding: px2vw(20px) 0;
}
.MidTitle {
  height: px2vw(45px);
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: px2vw(32px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.MidTop {
  height: 8%;
  margin-top: px2vw(42px);
  display: flex;
  justify-content: center;
  .MidtopCon {
    width: 66%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .MidTopBtn {
      width: 32%;
      height: 100%;
      background-image: url("~@/assets/images/fullscreen/MidTop.png");
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: px2vw(24px);
        padding-top: 2%;
        font-family: LiquidCrystal, LiquidCrystal-Regular;
        font-weight: 400;
        color: #f6bd16;
        text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
      }
      p {
        margin: 0;
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
        position: absolute;
        top: -21%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
.MidMap {
  height: 70%;
  position: relative;
  .mapAll {
    display: flex;
    align-items: center;
    position: absolute;
  }
  .mapBox {
    width: px2vw(18px);
    height: px2vw(18px);
    display: inline-block;
    border-radius: 2px;
  }
  span {
    font-size: px2vw(16px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #ffffff;
    margin-left: px2vw(12px);
    display: inline-block;
  }
  .mapBot {
    width: px2vw(185px);
    height: px2vw(144px);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("~@/assets/images/fullscreen/状态球备份.png");
    background-size: 100% 100%;
    span {
      font-size: px2vw(34px);
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #e9d500;
      text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    }
    p {
      margin: 0;
      position: absolute;
      left: 50%;
      bottom: -12%;
      transform: translateX(-50%);
      font-size: px2vw(18px);
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: #1fd2ff;
    }
  }
}
</style>
